<template>
  <!-- <div class="login-bg">
    <vue-particles
      id="tsparticles"
      :particlesInit="particlesInit"
      :particlesLoaded="particlesLoaded"
      :options="data.options"
    />
  </div> -->
</template>

<script setup>
import { watch, nextTick, onUpdated } from 'vue'
import { loadFull } from 'tsparticles'
import { reactive } from 'vue'
import themeStore from '@/store/theme/index.js'
import { storeToRefs } from 'pinia'
const usethemeStore = themeStore()
const { currentTheme } = storeToRefs(usethemeStore)
const data = reactive({
  options: {
    fpsLimit: 100,
    interactivity: {
      events: {
        onClick: {
          enable: true,
          mode: 'push'
        },
        onHover: {
          enable: true,
          mode: 'grab'
        },
        resize: true
      },
      modes: {
        bubble: {
          distance: 400,
          duration: 2,
          opacity: 0.6,
          size: 10
        },
        push: {
          quantity: 4
        },
        repulse: {
          distance: 200,
          duration: 0.4
        }
      }
    },
    particles: {
      color: {
        value: '#A78BFA'
      },
      links: {
        color: '#00D1FF',
        distance: 150,
        enable: true,
        opacity: 0.5,
        width: 1
      },
      collisions: {
        enable: true
      },
      move: {
        direction: 'none',
        enable: true,
        outMode: 'bounce',
        random: false,
        speed: 2,
        straight: false
      },
      number: {
        density: {
          enable: true,
          value_area: 800
        },
        value: 60
      },
      opacity: {
        value: 0.8
      },
      shape: {
        type: 'circle'
      },
      size: {
        random: true,
        value: 3
      }
    },
    detectRetina: true
  }
})
// 粒子效果
const particlesInit = async (engine) => {
  await loadFull(engine)
}
const particlesLoaded = async (container) => {
  await container.refresh()
}
watch(currentTheme, (newVal) => {
  if (newVal.theme === 'dark') {
    data.options.particles.color.value = '#A78BFA'
    data.options.particles.links.color = '#00D1FF'
    nextTick(() => {
      particlesLoaded()
      particlesInit()
    })
  } else {
    data.options.particles.color.value = '#bdc3c7'
    data.options.particles.links.color = '#3498db'
  }
})
</script>
<style lang="scss" scoped>
.login-bg {
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 9999;
}
</style>
